常用套件整理 - Visual Studio Code

TLDR

• 透過 EditorConfig 確保跨編輯器與 IDE 的程式碼風格一致。
• 使用 Error Lens 即時顯示錯誤訊息，提升除錯效率。
• 前端開發建議安裝 Vue - Official、ESLint 與 Prettier 以確保語法與格式正確。
• 測試自動化首選 Playwright Test for VSCode，可直接在編輯器內執行與偵錯。
• 容器化開發建議使用 Container Tools 取代舊版 Docker 套件，並搭配 Dev Containers 統一開發環境。
• 使用 WSL 套件可無縫銜接 Windows 與 Linux 開發環境。
• AI 輔助開發推薦 GitHub Copilot 與 GitHub Copilot Chat。

一般與外觀 (General & Appearance)

這類套件主要用於優化編輯器介面與維持開發規範。

• Chinese (Traditional) Language Pack for Visual Studio Code：VS Code 繁體中文語言套件。
• Visual Studio Keymap：統一 Visual Studio 與 VS Code 的快捷鍵操作體驗。
• Material Icon Theme：提供豐富且辨識度高的檔案圖示。
• EditorConfig for VS Code：支援 .editorconfig 設定檔，確保不同編輯器間的縮排與換行符號一致。

開發體驗 (Developer Experience)

這類套件用於提升日常編碼的效率與準確度。

• Error Lens：
  • 功能：直接在程式碼行尾顯示錯誤、警告與診斷訊息。
  • 什麼情況下會遇到這個問題：當需要快速定位程式碼錯誤，不想頻繁切換到「問題」面板查看時。
• Code Spell Checker：
  • 功能：檢查程式碼中的拼字錯誤，支援 CamelCase 命名慣例。

Markdown 撰寫 (Markdown Editing)

這類套件用於優化 Markdown 文件的撰寫與預覽體驗。

• Markdown All in One：提供快捷鍵、目錄生成 (TOC) 與列表編輯支援。
• Markdown Preview Enhanced：支援數學公式 (KaTeX/MathJax)、Mermaid 圖表與多種格式匯出。
• markdownlint：依據規則集即時檢查 Markdown 語法與格式，並提供自動修正。

前端開發 (Frontend Development)

這類套件用於處理 Vue 與 TypeScript 專案的開發需求。

• Vue - Official：Vue 官方推薦工具，提供 Vue 3 語法高亮、IntelliSense 與 TypeScript 支援。
• ESLint：即時顯示語法錯誤與風格問題。
• Prettier - Code formatter：程式碼格式化工具。
• Auto Close Tag：自動閉合 HTML/XML 標籤。
• Auto Rename Tag：修改起始標籤時，自動同步修改結尾標籤。
• Pretty TypeScript Errors：將 TypeScript 冗長難讀的錯誤訊息進行格式化與語法高亮。

測試 (Testing)

這類套件用於簡化測試流程。

• Playwright Test for VSCode：
  • 功能：支援在編輯器中執行、偵錯測試、錄製新測試以及生成選擇器 (Selectors)。
  • 什麼情況下會遇到這個問題：當專案使用 Playwright 進行 E2E 測試時，此為必裝套件。

容器與 DevOps (Containers & DevOps)

這類套件用於管理容器化環境與跨平台開發。

• Container Tools：
  • 功能：取代舊版 Docker 套件，整合 Docker 與 Podman 支援。
  • 什麼情況下會遇到這個問題：當需要管理容器生命週期，且希望使用單一工具整合 Docker 與 Podman 時。
• Docker DX：提供 Dockerfile 與 Compose 檔案的 IntelliSense、語法檢查與除錯。
• Dev Containers：將容器作為開發環境，確保團隊開發工具鏈一致。
• WSL：
  • 功能：讓 VS Code 直接連線到 WSL 內部。
  • 什麼情況下會遇到這個問題：當開發者在 Windows 上使用 Linux 工具鏈進行編譯與執行時。

AI 輔助 (AI Assistance)

這類套件用於提升程式碼撰寫與理解效率。

• GitHub Copilot：AI 程式碼補全工具。
• GitHub Copilot Chat：整合於側邊欄的 AI 聊天介面，用於程式碼解釋、重構與除錯。

其他基於 VS Code 的編輯器工具

針對特定編輯器生態的工具。

• Antigravity Cockpit：用於查詢 Antigravity 各個模型的使用額度。

異動歷程

• 2026-01-15 初版文件建立。
• 2026-03-25 新增 Markdown Preview Enhanced 與 markdownlint 套件，移除 Markdown Preview Mermaid Support（功能已由前者涵蓋），並將 Markdown 相關套件獨立為「Markdown 撰寫」小節。